<!-- components/CultureSection.vue -->
<template>
  <el-card class="culture-card">
    <h2 class="culture-title text-center mb-6">家族文化传承</h2>
    
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="cultural-item p-4">
          <div class="cultural-img-wrapper mb-3">
            <img src="https://picsum.photos/seed/architecture/400/300" alt="宗祠建筑" class="w-full h-40 object-cover rounded-lg">
            <div class="img-overlay"></div>
          </div>
          <h3 class="cultural-title mb-2">建筑艺术</h3>
          <p class="cultural-desc">宋代营造法式三进院落布局</p>
        </div>
      </el-col>
      
      <el-col :span="8">
        <div class="cultural-item p-4">
          <div class="cultural-img-wrapper mb-3">
            <img src="https://picsum.photos/seed/calligraphy/400/300" alt="书法作品" class="w-full h-40 object-cover rounded-lg">
            <div class="img-overlay"></div>
          </div>
          <h3 class="cultural-title mb-2">书画珍藏</h3>
          <p class="cultural-desc">明代族贤手书《朱子家训》</p>
        </div>
      </el-col>
      
      <el-col :span="8">
        <div class="cultural-item p-4">
          <div class="cultural-img-wrapper mb-3">
            <img src="https://picsum.photos/seed/antique/400/300" alt="文物藏品" class="w-full h-40 object-cover rounded-lg">
            <div class="img-overlay"></div>
          </div>
          <h3 class="cultural-title mb-2">器物典藏</h3>
          <p class="cultural-desc">南宋青白釉影青瓷香炉</p>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<style lang="scss" scoped>
.culture-card {
  background: linear-gradient(135deg, #f5f0e8 0%, #ede6d8 100%);
  border: 1px solid #d4c1b3;
  padding: 1.8rem;
}

.culture-title {
  font-size: 1.8rem;
  color: #964b00;
  font-weight: bold;
  position: relative;
  display: inline-block;
  padding: 0 1.5rem;
  
  &::before, &::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid #e74c3c;
    border-radius: 50%;
  }
  
  &::before {
    left: 0;
    transform: translateY(-50%);
  }
  
  &::after {
    right: 0;
    transform: translateY(-50%);
  }
}

.cultural-item {
  border-radius: 0.8rem;
  background: #fff;
  border: 1px solid #e0d6c8;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    
    .img-overlay {
      opacity: 0.2;
    }
  }
}

.cultural-img-wrapper {
  position: relative;
  border-radius: 0.6rem;
  overflow: hidden;
  
  .img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, #e74c3c, #964b00);
    opacity: 0.05;
    transition: opacity 0.3s ease;
  }
}

.cultural-title {
  font-size: 1.3rem;
  color: #964b00;
  font-weight: bold;
  text-align: center;
}

.cultural-desc {
  color: #a98c72;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
}
</style>